<template>
    <tm-app class="d-flex d-c a-center dteali">
        <view
            style="width: 750rpx; position: fixed; z-index: 100"
            :style="{
                height: systemInfo.statusBarHeight + 'px',
                background: `rgba(35,226,166,${opacityNum})`,
            }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="z-index: 100; border-bottom: none"
            :style="{
                top: systemInfo.statusBarHeight + 'px',
                background: `rgba(35,226,166,${opacityNum})`,
            }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/image/back.png" class="back"></image>
            </view>
            <view class="title" style="color: #fff">群设置</view>
            <!-- <view class="dotTab1">
                <view
                    class="active_tab_bg d-flex"
                    :class="{ active: activeTab === 'box2' }"
                >
                    <view class="linear"></view>
                </view>

                <view
                    class="tab d-flex a-center j-center"
                    @tap="changeTab('box1')"
                    :class="{ active: activeTab === 'box1' }"
                    style="left: 0"
                >
                    <text class="text" :class="{ active: activeTab === 'box1' }"
                        >群设置</text
                    >
                </view>
                <view
                    class="tab d-flex a-center j-center"
                    @tap="changeTab('box2')"
                    :class="{ active: activeTab === 'box2' }"
                    style="right: 0"
                    ><text
                        class="text"
                        :class="{ active: activeTab === 'box2' }"
                        >群信息</text
                    ></view
                >
            </view> -->
            <view class="right_box">
                <!-- <image src="/static/image/shere.png" class="share"></image> -->
            </view>
        </view>

        <view class="top_bg">
            <view class="shadow"></view>
            <view class="shadow1"></view>
            <cacheimg
                class="img"
                :style="{ transform: `scale(${scale})` }"
                :saveKey="groupDetail.groupId"
                :src="groupDetail.photo"
                mode="aspectFill"
            ></cacheimg>
        </view>

        <scroll-view
            class="scroll_box"
            :scroll-y="true"
            :scroll-with-animation="true"
            :scroll-into-view="scrollId"
            @scroll="Scroll"
        >
            <view id="first" style="width: 100%; height: 1rpx"></view>
            <view class="title1 d-flex a-center" style="margin-top: 300rpx">
                <text style="margin-right: 10rpx">{{ groupDetail.name }}</text>
            </view>

            <view class="msg1 d-flex j-between">
                <view class="box1 d-flex a-center">
					<!--
                    <image class="pos" src="/static/image/pos.png" mode="" />
                    <text class="text">{{groupDetail.groupUserCity}}·{{groupDetail.distance}}</text>
					-->
                    <text class="text" style="margin-left: 30rpx"
                        >ID：{{ groupDetail.groupId }}</text
                    >
                </view>
				<!--
                <text class="goHistory d-flex a-center" @tap="goHistory">
                    群历史
                    <image class="img" src="/static/image/lishi.png"></image>
                </text>
				-->
            </view>

            <!-- @touchstart="touchStart"
                @touchmove="touchMove"
                @touchend="touchEnd1" -->

            <view
                class="swiper_box box1"
                v-show="box1Flag"
                :class="{ active: activeTab === 'box2' }"
                :style="{
                    top: `calc(400rpx + ${systemInfo.statusBarHeight}px)`,
                }"
            >
                <view id="member" class="quanzhu">
                    <view class="quanzhu_title d-flex a-center j-between">
                        <view
                            class="title2 d-flex a-center"
                            style="padding-left: 0"
                        >
                            <view class="dot"></view>
                            成员
                        </view>
                        <view class="time" @tap="goMembersDetail">
                            <text
                                class="chakan"
                                v-show="groupDetail.currentUserCount > 3"
                                >查看更多成员</text
                            >
                            <image
                                src="/static/Information/right-b.png"
                                class="right-b"
                            ></image>
                        </view>
                    </view>
                    <view class="user-li">
                        <view
                            class="user-li-demo"
                            v-for="(item, index) in groupUsers"
                            :key="index"
                            @tap="goUserDetail(item.userId)"
                        >
                            <cacheimg
                                :saveKey="item.userId"
                                :src="item.userPhoto || '/static/head.jpg'"
                                class="touxiang"
                            ></cacheimg>
                            <view class="role" v-if="item.role === 'Owner'">
                                <view class="bg"></view>
                                <text>群主</text>
                            </view>
                            <view class="role" v-if="item.role === 'Admin'"
                                >管理员</view
                            >
                            <image
                                src="/static/Information/vip2.png"
                                class="vip"
                                v-if="item.isstate"
                            ></image>
                        </view>
                        <view
                            class="user-li-demo user-li-demoadd"
                            @tap="goGroupInvite"
                        >
                            <image
                                src="/static/Information/jia.png"
                                class="jia"
                            ></image>
                        </view>
                        <view v-if="role === 'Owner' || role === 'Admin'" class="user-li-demo user-li-demoadd" @tap="goGroupKickout">
                            <image
                                src="/static/Information/jian.png"
                                class="jia"
                            ></image>
                        </view>
                    </view>
                </view>

                <view class="groupMsg d-flex a-center j-between" @tap="goGroupMsg">
                    <view class="title2 d-flex a-center">
                        <view class="dot"></view>
                        群信息
                    </view>
					<view style="padding-right: 30rpx;">
					    <image
					        src="/static/Information/right-b.png"
					        style="width: 20rpx;height: 20rpx;"
					    >
					    </image>
					</view>
					<!--
                    <scroll-view
                        :scroll-y="false"
                        :scroll-x="true"
                        :show-scrollbar="false"
                        :enable-flex="true"
                        class="service1"
                    >
                        <view class="box d-flex a-center">
                            <view
                                class="card d-flex d-c j-center a-center checked"
                                v-for="(
                                    item, index
                                ) in groupDetail.userGroupItemss"
                            >
                                <view
                                    class="rect d-flex a-center j-center"
                                    :class="{
                                        newService: !baseService.includes(
                                            item.photo
                                        ),
                                    }"
                                >
                                    <image
                                        class="img"
                                        :src="`/static/createCircle/${item.photo}-w.png`"
                                    ></image>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
					-->
                </view>

                <view
                    class="quanzishezhi"
                    :style="{ minHeight: minHeight1 + 'px' }"
                >
                    <view id="content3Height" class="content3">
                        <view class="title2 d-flex a-center">
                            <view class="dot"></view>
                            群设置
                        </view>

                        <view class="opt-list notactive">
                            <view class="text">置顶聊天</view>
                            <view class="switch">
                                <tm-switch
                                    linear="left"
                                    linearDeep="accent"
                                    :defaultValue="isPinned"
                                    v-model="isPinned"
                                    @change="isPinnedChange"
                                    color="rgba(15, 95, 70, 0.30)"
                                    :barColor="
                                        isPinned
                                            ? 'rgba(35, 226, 166, 1)'
                                            : 'rgba(195, 204, 202, 1)'
                                    "
                                    barIcon=""
                                    size="normal"
                                ></tm-switch>
                            </view>
                        </view>

                        <view class="opt-list notactive">
                            <view class="text">消息免打扰</view>
                            <view class="switch">
                                <tm-switch
                                    linear="left"
                                    linearDeep="accent"
                                    :defaultValue="isMute"
                                    v-model="isMute"
                                    @change="isMuteChange"
                                    color="rgba(15, 95, 70, 0.30)"
                                    :barColor="
                                        isMute
                                            ? 'rgba(35, 226, 166, 1)'
                                            : 'rgba(195, 204, 202, 1)'
                                    "
                                    barIcon=""
                                    size="normal"
                                ></tm-switch>
                            </view>
                        </view>
                        <view class="opt-list" @tap="goNotice">
                            <view class="text">群公告 </view>
                            <view class="switch">
                                <image
                                    src="/static/Information/right-b.png"
                                    class="right-b"
                                >
                                </image>
                            </view>
                        </view>
						<view class="opt-list" @tap="onShowerweima">
						    <view class="text">群二维码 </view>
						    <view class="switch">
						        <image
						            src="/static/userinfo/erweima.png"
						            style="width: 36rpx;height: 36rpx;"
						        >
						        </image>
						    </view>
						</view>
						<!--
                        <view
                            class="opt-list notactive"
                            v-if="role === 'Admin' || role === 'Owner'"
                        >
                            <view class="text"
                                >游客模式
                                <image
                                    @tap="ask1.open()"
                                    src="/static/Information/wenhao.png"
                                    class="wenhao"
                                ></image>
                            </view>
                            <view class="switch">
                                <tm-switch
                                    linear="left"
                                    linearDeep="accent"
                                    :defaultValue="isVisitor"
                                    v-model="isVisitor"
                                    @change="changeIsVisitor"
                                    color="rgba(15, 95, 70, 0.30)"
                                    :barColor="
                                        isVisitor
                                            ? 'rgba(35, 226, 166, 1)'
                                            : 'rgba(195, 204, 202, 1)'
                                    "
                                    barIcon=""
                                    size="normal"
                                ></tm-switch>
                            </view>
                        </view>
						-->
                        <view
                            class="opt-list notactive"
                            v-if="role === 'Admin' || role === 'Owner'"
                        >
                            <view class="text"
                                >禁止互加好友
                                <image
                                    @tap="ask2.open()"
                                    src="/static/Information/wenhao.png"
                                    class="wenhao"
                                ></image>
                            </view>
                            <view class="switch">
                                <tm-switch
                                    linear="left"
                                    linearDeep="accent"
                                    :defaultValue="isInteraction"
                                    v-model="isInteraction"
                                    @change="changeIsInteraction"
                                    color="rgba(15, 95, 70, 0.30)"
                                    :barColor="
                                        isInteraction
                                            ? 'rgba(35, 226, 166, 1)'
                                            : 'rgba(195, 204, 202, 1)'
                                    "
                                    barIcon=""
                                    size="normal"
                                ></tm-switch>
                            </view>
                        </view>
						
                        <view
                            class="opt-list"
                            v-if="role === 'Admin' || role === 'Owner'"
                            @tap="goGroupManage"
                        >
                            <view class="text">群管理 </view>
                            <view class="switch">
                                <text style="color:#999;font-size:26rpx;margin-right:10rpx;">管理员和黑名单</text>
                                <image
                                    src="/static/Information/right-b.png"
                                    class="right-b"
                                >
                                </image>
                            </view>
                        </view>
                        <view class="opt-list" @tap="goNick">
                            <view class="text">我在本群昵称 </view>
                            <view class="switch d-flex a-center">
                                <text
                                    v-if="nameCard"
                                    class="text"
                                    style="margin-right: 10rpx; color: #999;font-size:26rpx;"
                                    >{{ nameCard }}</text
                                >
                                <text
                                    v-if="!nameCard"
                                    class="text"
                                    style="margin-right: 10rpx; color: #999;font-size:26rpx;"
                                >
                                    未设置
                                </text>
                                <image
                                    src="/static/Information/right-b.png"
                                    class="right-b"
                                >
                                </image>
                            </view>
                        </view>
                        <view class="opt-list" @tap="goGroupName">
                            <view class="text">群名称备注</view>
                            <view class="switch d-flex a-center">
                                <text
                                    v-if="group_nick"
                                    class="text"
                                    style="margin-right: 10rpx;color: #999;font-size:26rpx;"
                                >
                                    {{ group_nick }}
                                </text>
                                <text
                                    v-if="!group_nick"
                                    class="text"
                                    style="margin-right: 10rpx;color: #999;font-size:26rpx;"
                                >
                                    未设置
                                </text>
                                <image
                                    src="/static/Information/right-b.png"
                                    class="right-b"
                                >
                                </image>
                            </view>
                        </view>
                        <!-- <view class="opt-list" @tap="goGroupSearch">
                            <view class="text">查找聊天记录 </view>
                            <view class="switch">
                                <image
                                    src="/static/Information/right-b.png"
                                    class="right-b"
                                >
                                </image>
                            </view>
                        </view> -->
                        <view class="opt-list" @tap="clearChatHisoty">
                            <view class="text">清空聊天记录 </view>
                            <view class="switch">
                                <image
                                    src="/static/Information/right-b.png"
                                    class="right-b"
                                >
                                </image>
                            </view>
                        </view>
                        <view class="opt-list" @tap="onLinkcomplaint">
                            <view class="text">投诉 </view>
                            <view class="switch">
                                <image
                                    src="/static/Information/right-b.png"
                                    class="right-b"
                                >
                                </image>
                            </view>
                        </view>
                    </view>

                    <view
                        class="btn_main"
                        v-if="role !== 'Owner'"
                        @tap="openPopup1"
                    >
                        <text class="quit">退出群</text>
                    </view>

                    <view
                        class="btn_main"
                        v-if="role === 'Owner'"
                        @tap="openPopup"
                    >
                        <text class="quit">解散群</text>
                    </view>
                </view>
            </view>
        </scroll-view>

        <uni-popup ref="popup" background-color="transparent" :safe-area="false">

            <view class="sys-confirm-content">
				<view class="confirm-content-title">确认解散群<text style="color:#1DC691">{{groupDetail.name}}</text>?</view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<view  @tap="dismissGroup" class="content-button button-confirm" style="color: #1DC691;">确认</view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view @tap="closePopup" class="content-button" style="color: #999999;">取消</view>
		    </view>
        </uni-popup>

        <uni-popup ref="cant_popup" background-color="transparent" :safe-area="false">

            <view class="sys-confirm-content">
				<view class="confirm-content-title">群内还有其他用户，无法解散群</view>
                <view style="height:100rpx;"></view>
                <view style="height: 20rpx; background: #f5f5f5"></view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<!-- <view  @tap="dismissGroup" class="content-button button-confirm" style="color: #1DC691;">确认</view>
				<view style="height: 20rpx; background: #f5f5f5"></view> -->
				<view @tap="cant_popup.close()" class="content-button" style="color: #1DC691;">好的</view>
		    </view>
        </uni-popup>

        <uni-popup ref="popup1" background-color="transparent" :safe-area="false">

            <view class="sys-confirm-content">
				<view class="confirm-content-title">确认退出群并删除会话?</view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<view  @tap="agree" class="content-button button-confirm" style="color: #1DC691;">确认</view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view @tap="closePopup1" class="content-button" style="color: #999999;">取消</view>
		    </view>

        </uni-popup>

        <uni-popup ref="popupDel" type="bottom" background-color="transparent" :safe-area="false">

            <view class="sys-confirm-content">
				<view class="confirm-content-title">
                    确认删除
                    <text style="color: #1DC691;">{{ groupDetail.name }}</text>
                    的聊天记录？
                </view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<view  @tap="clearConversion" class="content-button button-confirm" style="color: #1DC691;">确认</view>
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view @tap="popupDel.close()" class="content-button" style="color: #999999;">取消</view>
		    </view>

            <!-- <view class="popup-content">
                <view class="desp d-flex a-center">
                    确认删除
                    <text class="text_main">{{ groupDetail.name }}</text>
                    的聊天记录？
                </view>
                <view
                    class="row d-flex a-center j-center error"
                    @tap="clearConversion"
                    >确认</view
                >
                <view style="height: 20rpx; background: #f5f5f5"></view>
                <view
                    class="row d-flex a-center j-center cancel"
                    @tap="popupDel.close()"
                    >取消</view
                >
            </view> -->
        </uni-popup>

        <uni-popup
            ref="servicePopup"
            :safe-area="false"
            type="bottom"
            background-color="transpartent"
        >
            <view
                class="servicePopup"
                :class="{ newService: showServiceisNew }"
            >
                <view class="shadow"></view>
                <view class="shadow1"></view>
                <view class="content">
                    <view class="title d-flex a-center j-center">
                        <view class="text">{{ currentShowService.title }}</view>
                        <view
                            class="close psa h-center"
                            @tap="servicePopup.close()"
                        >
                            <image
                                class="img"
                                src="/static/image/close.png"
                                mode=""
                            />
                        </view>
                    </view>
                    <view
                        class="row1 d-flex"
                        v-for="(item, index) in currentShowService.detailArr"
                    >
                        <view class="index d-flex a-center j-center">{{
                            index + 1
                        }}</view>
                        <view class="text">{{ item }}</view>
                    </view>
                </view>
            </view>
        </uni-popup>


        <uni-popup ref="ask1" type="bottom" background-color="transparent" :safe-area="false">
            <view class="sys-confirm-content">
				<view class="confirm-content-title">胖友以游客模式进入群内，可查看群内消息和打卡信息，但无法发言或参与打卡</view>
                <view style="width:750rpx;height:30rpx;background:#fff"></view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view  @tap="ask1.close()" class="content-button button-confirm" style="color: #1DC691;">确认</view>
		    </view>
        </uni-popup>

        <uni-popup ref="ask2" type="bottom" background-color="transparent" :safe-area="false">
            <view class="sys-confirm-content">
				<view class="confirm-content-title">开启后，群成员互相无法看到对方ID，且无法通过个人主页添加好友</view>
                <view style="width:750rpx;height:30rpx;background:#fff"></view>
				<!-- <view class="confirm-content-tip">
					<view class="content-tip-row" style="color: #cc3300;">同时删除与该联系人的聊天记录</view>
				</view> -->
				<view style="height: 20rpx; background: #f5f5f5"></view>
				<view  @tap="ask2.close()" class="content-button button-confirm" style="color: #1DC691;">确认</view>
		    </view>
        </uni-popup>
		<erweima :groupDetail="groupDetail" :show="codePopup" :qrcode="groupQR" @openCodePopup="openCodePopup" />
    </tm-app>
</template> 
<script setup lang="ts">
import { ref, reactive, computed, nextTick } from "vue";
import {
    onReady,
    onShow,
    onHide,
    onLoad,
    onUnload,
    onPageScroll,
} from "@dcloudio/uni-app";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { userData as userDataStore } from "@/store/userData";
import { imStore } from "@/store/imStore";
import {
    getCircleDetail,
    groupUpdate,
    destroyGroup,
    vistorQuit,
	sendBannedMessage,
	getGroupQR,
} from "@/api/api";
import {
    getGroupProfile,
    getGroupMemberList,
    quitGroup,
    clearHistoryMessage,
    setGroupMemberNameCard,
    setGroupMemberCustomField,
	updateGroupProfile
} from "@/hooks/imHooks";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import { activeBar as activeBarStore } from "@/store/activeBar";
import cacheimg from "@/components/cacheimg.vue";
import erweima from "./erweima.vue";

const activeBar = activeBarStore();
const systemInfo: any = systemInfoStore();
const systemConfig: any = systemConfigStore();
const userData: any = userDataStore();
const IM_STORE: any = imStore();
const isPinned: any = ref(false);
const isMute: any = ref(false);
const isVisitor: any = ref(false);
const isInteraction: any = ref(false);
const popupDel = ref();

const box1Flag = ref(true);
const box2Flag = ref(false);
const scrollId = ref();


const ask1 = ref();
const ask2 = ref();

const goGroupInvite = () => {
    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupInvite?groupID=${groupId.value}`,
    });
};
const goGroupKickout = () => {
    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupKickout?groupID=${groupId.value}`,
    });
    
};

const groupUsers = computed(()=>{
    if(!groupDetail.value){
        return []
    }

    const arr = groupDetail.value.groupUsers||[];

    if(role.value === 'Owner'){
        if(arr.length >=8){
            return arr.slice(0,8)
        }
    }else{
        if(arr.length >=9){
            return arr.slice(0,9)
        }
    }


    return arr;

})

/*
const changeTab = (tab) => {
    scrollId.value = "";
    if (tab === "box1") {
        box1Flag.value = true;

        setTimeout(() => {
            box2Flag.value = false;
            nextTick(() => {
                scrollId.value = "first";
            });
        }, 300);
    } else {
        box2Flag.value = true;
        setTimeout(() => {
            box1Flag.value = false;
            nextTick(() => {
                scrollId.value = "first";
            });
        }, 300);
    }

    nextTick(() => {
        setTimeout(() => {
            activeTab.value = tab;
        }, 100);
    });
};
*/
const showServiceisNew = computed(() => {
    return !baseService.value.includes(currentShowService.value.photo);
});

const memberViewHeight = ref(0);
const content3Height = ref(0);

const onLinkcomplaint = () => {
    uni.navigateTo({
        url: `/pages/complaint/complaint?groupId=${groupId.value}&groupName=${groupDetail.value.name}&target=group `,
    });
};

const getContent3Height = () => {
    try {
        uni.createSelectorQuery()
            .select("#content3Height")
            .boundingClientRect((data:any) => {
                if (!data || !data.height) {
                    setTimeout(() => {
                        getContent3Height();
                    }, 50);

                    return;
                }

                content3Height.value = data.height;
            })
            .exec();
    } catch (error) {
        setTimeout(() => {
            getContent3Height();
        }, 50);
    }
};

const getContent4Height = () => {
    try {
        uni.createSelectorQuery()
            .select("#content3Height")
            .boundingClientRect((data:any) => {
                if (!data || !data.height) {
                    setTimeout(() => {
                        getContent4Height();
                    }, 50);

                    return;
                }
                //content4Height.value = data.height;
            })
            .exec();
    } catch (error) {
        setTimeout(() => {
            getContent4Height();
        }, 50);
    }
};
const getMemberViewHeight = () => {
    try {
        uni.createSelectorQuery()
            .select("#member")
            .boundingClientRect((data:any) => {
                if (!data || !data.height) {
                    setTimeout(() => {
                        getMemberViewHeight();
                    }, 50);

                    return;
                }

                memberViewHeight.value = data.height;
            })
            .exec();
    } catch (error) {
        setTimeout(() => {
            getMemberViewHeight();
        }, 50);
    }
};

const clearChatHisoty = () => {
    popupDel.value.open();
};

const goBack = () => {
    uni.navigateBack();
};

const opacityNum: any = ref(0); //响应式
/*
const getTag = (id) => {
    let str = "";
    systemConfig.groupTag.forEach((item) => {
        if (item.slimKey === id) {
            str = item.slimValue;
        }
    });
    return str;
};

const jiaobiaoText = computed(() => {
    let str = "";
    systemConfig.groupTag.forEach((item) => {
        if (item.slimKey === groupDetail.value.label) {
            str = item.slimValue;
        }
    });

    return str;
});

const shadowClass = computed(() => {
    if (!groupDetail.value) {
        return "";
    }

    if (!groupDetail.value.label) {
        return "";
    }

    if (!groupDetail.value.label) {
        return "";
    }

    if (!systemConfig.groupTag) {
        return "";
    }

    if (!systemConfig.groupTag.length) {
        return "";
    }

    if (groupDetail.value.label === systemConfig.groupTag[0].slimKey) {
        return "shadow0";
    }

    if (groupDetail.value.label === systemConfig.groupTag[1].slimKey) {
        return "shadow1";
    }

    if (groupDetail.value.label === systemConfig.groupTag[2].slimKey) {
        return "shadow2";
    }

    if (groupDetail.value.label === systemConfig.groupTag[3].slimKey) {
        return "shadow3";
    }

    if (groupDetail.value.label === systemConfig.groupTag[4].slimKey) {
        return "shadow4";
    }
});
*/
const Scroll = (event: any) => {
    const { scrollTop } = event.detail;
    if (scrollTop >= 0) {
        // 导航条颜色透明渐变
        if (scrollTop <= 20) {
            opacityNum.value = 0;
        } else if (20 < scrollTop && scrollTop <= 100) {
            opacityNum.value = scrollTop / 100;
        } else if (scrollTop > 100) {
            opacityNum.value = 1;
        }
    }

    if (scrollTop < 0) {
        scale.value = 1 - scrollTop / 200;
    } else {
        scale.value = 1;
    }
};

const goUserDetail = (userId: any) => {
	//let myIsInteraction = Number(isInteraction.value);
	let isAdd = !isInteraction.value;
	const myRole = IM_STORE.conversation?.groupProfile?.selfInfo.role
	if(myRole == 'Owner' || myRole == 'Admin'){
		isAdd = true
	}
	const targetUser = IM_STORE.groupMembers?.find((item:any) => item.userID == userId);
	if(targetUser?.role == 'Owner' || targetUser?.role == 'Admin'){
		isAdd = true
	}
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${userId}&isAdd=${isAdd}&from=group`,
    });
};

const isPinnedChange = (bool: boolean) => {
    const options: any = {
        conversationID: IM_STORE.conversation.conversationID,
        isPinned: true,
    };
    if (bool) {
        options.isPinned = true;
    } else {
        options.isPinned = false;
    }

    uni.$TUIKit.TUIConversationServer.pinConversation(options).then(
        (imResponse: any) => {
            console.log(imResponse);
        }
    );
    isPinned.value = bool;
};

const isMuteChange = (bool: boolean) => {

    const options: any = {
        groupID: groupId.value,
        messageRemindType: bool?uni.$TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE:uni.$TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE,
    };
    uni.$TUIKit.TUIConversationServer.muteConversation(options);
    isMute.value = bool;
};
/*
const changeIsVisitor = (bool: boolean) => {
    const obj = {
        groupId: groupId.value,
        isVisitor: 0,
    };
    obj.isVisitor = bool ? 1 : 0;
    updateData(obj);
    isVisitor.value = bool;
};
*/
const changeIsInteraction = (bool: boolean) => {
    const obj = {
        groupId: groupId.value,
        isInteraction: 0,
    };
    obj.isInteraction = bool ? 1 : 0;
    updateData(obj);
    isInteraction.value = bool;
};

const updateData = async (obj: any) => {
    //{groupId:groupId.value,notice:notification.value}
    const res: any = await groupUpdate(obj);
    const { flag } = res;
    if (flag !== 1) {
        uni.hideLoading();
        uni.showToast({
            icon: "none",
            title: "修改失败",
            duration: 1500,
        });
        return;
    }
};

const groupId = ref("");

const groupDetail: any = ref({});

const getDetail = async (groupId: string) => {
    const res: any = await getCircleDetail({ groupId });
    const { flag, data } = res;
    //console.log("getDetail");
    //console.log(res);
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取群资料失败",
            duration: 1500,
        });
        return;
    }
    data.introduction = data.introduction.replace(/\n/g, " <br/>");
    data.introduction2 = data.introduction2.replace(/\n/g, "<br/>");
	
    groupDetail.value = data;
    isVisitor.value = !!Number(data.isVisitor);
    isInteraction.value = !!Number(data.isInteraction);
};

const role = ref("Member");

const groupProfile:any = ref({});

const currentUserIsVisitor = computed(() => {
    let flag = false;

    const { memberCustomField } = groupProfile.value.selfInfo;
	
    if (memberCustomField.length) {
        memberCustomField.forEach((item:any) => {
            if (item.key === "role" && item.value === "Tourist") {
                flag = true;
            }
        });
    }

    return flag;
});

const GetGroupProfile = async (groupId: string) => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            GetGroupProfile(groupId);
        }, 200);
        return;
    }
    const res: any = await getGroupProfile(groupId);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "获取群信息失败",
            duration: 1500,
        });
        return;
    }
    groupProfile.value = data.group;
	
	
    data.group.selfInfo.memberCustomField.forEach((item:any) => {
        const { key, value } = item;
        if (key === "group_nick") {
            group_nick.value = value;
        }
    });

    nameCard.value = data.group.selfInfo.nameCard;

    role.value = data.group.selfInfo.role;

    IM_STORE.conversationList.forEach((item:any) => {
        if (
            item.type === "GROUP" &&
            item.groupProfile.groupID === data.group.groupID
        ) {
            IM_STORE.updateConversationListGroupProfile({
                value: data.group,
            });
        }
    });
    IM_STORE.groupList.forEach((item:any, index:number) => {
        if (item.groupID === data.group.groupID) {
            IM_STORE.updateGroupListByIndex({ index, value: data.group });
        }
    });

    if (
        IM_STORE.conversation.type === "GROUP" &&
        IM_STORE.conversation.groupProfile.groupID === data.group.groupID
    ) {
        IM_STORE.updateConversationGroupProfile(data.group);
        uni.$emit("groupListUpdate");
    }
};

const activeText = ref("群资料");

const activeTab = ref("box1");
/*
const toggleActive = () => {
    activeTab.value = activeTab.value === "box1" ? "box2" : "box1";
    activeText.value = activeTab.value === "box1" ? "群资料" : "群设置";
};
*/
const state1 = reactive({
    offset: 0,
    startOffset: 0,
    dragging: false,
    startX: 0,
    startY: 0,
    direction: "",
    deltaX: 0,
    deltaY: 0,
    offsetX: 0,
    offsetY: 0,
});

const MIN_DISTANCE = 10;
var getDirection = function (x:number, y:number) {
    if (x > y && x > MIN_DISTANCE) {
        return "horizontal";
    }
    if (y > x && y > MIN_DISTANCE) {
        return "vertical";
    }
    return "";
};

var resetTouchStatus = function () {
    state1.direction = "";
    state1.deltaX = 0;
    state1.deltaY = 0;
    state1.offsetX = 0;
    state1.offsetY = 0;
};
/*
const touchStart = (event: any) => {
    resetTouchStatus();
    state1.startOffset = state1.offset;
    var touchPoint = event.touches[0];
    state1.startX = touchPoint.clientX;
    state1.startY = touchPoint.clientY;
};
*/
let moveFlag = false;
const allowScroll = ref(true);
const allwoHorizontal = ref(true);
/*
const touchMove = (event: any) => {
    var touchPoint = event.touches[0];
    state1.deltaX = touchPoint.clientX - state1.startX;
    state1.deltaY = touchPoint.clientY - state1.startY;
    state1.offsetX = Math.abs(state1.deltaX);
    state1.offsetY = Math.abs(state1.deltaY);
    state1.direction =
        state1.direction || getDirection(state1.offsetX, state1.offsetY);

    if (!moveFlag && state1.offsetX > 10) {
        allowScroll.value = false;
        allwoHorizontal.value = true;
        moveFlag = true;
    }

    if (!moveFlag && state1.offsetY > 10) {
        allowScroll.value = true;
        allwoHorizontal.value = false;
        moveFlag = true;
    }

    if (state1.direction !== "horizontal") {
        return;
    }
};
const touchEnd1 = (event: any) => {
    if (allwoHorizontal.value && state1.deltaX < -40 && state1.offsetY < 40) {
        activeTab.value = "box2";
        activeText.value = "群设置";
    }
    allowScroll.value = true;
    allwoHorizontal.value = true;
    moveFlag = false;
};

const touchEnd2 = (event: any) => {
    if (allwoHorizontal.value && state1.deltaX > 40 && state1.offsetY < 40) {
        activeTab.value = "box1";
        activeText.value = "群资料";
    }
    allowScroll.value = true;
    allwoHorizontal.value = true;
    moveFlag = false;
};
*/
const goMembersDetail = () => {
    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupMembers?groupID=${groupId.value}`,
    });
};

const goNotice = () => {
    const isOwner =
        groupProfile.value.selfInfo.role ===
            uni.$TIM.TYPES.GRP_MBR_ROLE_OWNER ||
        groupProfile.value.selfInfo.role === uni.$TIM.TYPES.GRP_MBR_ROLE_ADMIN;
    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupNotice?groupID=${groupId.value}&notification=${groupProfile.value.notification}&isOwner=${isOwner}`,
    });
};

const goGroupMsg = () => {
    const isOwner =
        groupProfile.value.selfInfo.role ===
            uni.$TIM.TYPES.GRP_MBR_ROLE_OWNER ||
        groupProfile.value.selfInfo.role === uni.$TIM.TYPES.GRP_MBR_ROLE_ADMIN;
    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupMsg?groupID=${groupId.value}&isOwner=${isOwner}`,
    });
};

const goEdit = () => {
    uni.navigateTo({
        url: `/pages/publicEdit/edit?title=修改备注&emit=remarkChange&len=16&text=${remark.value}`,
    });
};

const nickChange = async (str: string) => {
    console.log("nickChange");
    console.log("nickChange");
    console.log("nickChange");

    const res: any = await setGroupMemberNameCard({
        groupID: groupId.value,
        userID: userData.id,
        nameCard: str,
    });
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "修改群昵称失败,请稍后再试",
            duration: 1500,
        });
        return;
    }

    GetGroupProfile(groupId.value);
};

const groupNickChange = async (str: string) => {
    console.log("groupNickChange");
    const res: any = await setGroupMemberCustomField({
        groupID: groupId.value,
        memberCustomField: [{ key: "group_nick", value: str || "" }],
    });
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "群名称备注失败,请稍后再试",
            duration: 1500,
        });
        return;
    }

    GetGroupProfile(groupId.value);
};

const goNick = () => {
    uni.navigateTo({
        url: `/pages/publicEdit/edit?title=我的群昵称&emit=nickChange&len=16&text=${nameCard.value}`,
    });
};

const group_nick = ref();
const nameCard = ref();

const goGroupName = () => {
    uni.navigateTo({
        url: `/pages/publicEdit/edit?title=群名称备注&emit=groupNickChange&len=16&text=${group_nick.value}`,
    });
};
const goGroupManage = () => {
    IM_STORE.setGroupDetail(groupDetail.value);
    IM_STORE.setGroupProfile(groupProfile.value);
    const { role } = groupProfile.value.selfInfo;
    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupManage?groupID=${groupId.value}&role=${role}`,
    });
};
/*
const goGroupSearch = () => {
    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupSearch?groupID=${groupId.value}`,
    });
};
*/
let offset = 0;

const minHeight1 = computed(() => {
    let num =
        systemInfo.windowHeight -
        systemInfo.statusBarHeight -
        uni.upx2px(550) -
        memberViewHeight.value;

    if (
        num >
        content3Height.value +
            uni.upx2px(150) +
            systemInfo.safeAreaInsets.bottom
    ) {
        return num;
    } else {
        return (
            content3Height.value +
            uni.upx2px(150) +
            systemInfo.safeAreaInsets.bottom
        );
    }
});

// const minHeight2 = computed(() => {
//     let num =
//         systemInfo.windowHeight - systemInfo.statusBarHeight - uni.upx2px(600);
//     if (num > (content4Height.value+uni.upx2px(150)+systemInfo.safeAreaInsets?.bottom)) {
//         return num;
//     } else {
//         return content4Height.value+uni.upx2px(150)+systemInfo.safeAreaInsets?.bottom;
//     }
// });

const getGroupMembers = async (groupId: string) => {
    if (!offset) {
        IM_STORE.clearGroupMembers();
    }

    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            getGroupMembers(groupId);
        }, 200);
        return;
    }

    const res: any = await getGroupMemberList(groupId, offset);
    const { code, data } = res;
    //console.log("getGroupMembers");
    //console.log(data.memberList);
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "获取成员列表失败",
            duration: 1500,
        });
        return;
    }
    offset++;
    IM_STORE.pushGroupMembers(data.memberList);
    if (data.memberList.length === 500) {
        getGroupMembers(groupId);
    }
};

let agreeLoading = false;

const vistorQuitGroup = async () => {
    const params = {
        groupId: groupId.value,
        userId: userData.id,
    };
    const res: any = await vistorQuit(params);
    closePopup1();
    agreeLoading = false;
    dialogVisible.value = false;
    const { flag } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "退出群失败，请稍后再试",
            duration: 1500,
        });
        return;
    }

    const conversationID = `GROUP${groupId.value}`;

    uni.$TUIKit.TUIConversationServer.deleteConversation(conversationID)
        .then()
        .catch(() => {});

    IM_STORE.delGroup(groupId.value);


    uni.switchTab({
        url: "/pages/quanzi/quanzi",
        success(){
            uni.showToast({
                    icon: "none",
                    title: "退出群成功",
                    duration: 1500,
            });
        }
    });


    // setTimeout(() => {
    //     activeBar.setActiveBar("quanzi");

    //     /*#ifdef APP-PLUS*/
    //     uni.switchTab({
    //         url: "/pages/quanzi/quanzi",
    //     });
    //     /*#endif*/
    // }, 1500);
};

const agree = async () => {
    if (agreeLoading) {
        return;
    }
    if (currentUserIsVisitor.value) {
        vistorQuitGroup();
        return;
    }
    uni.showLoading();

    agreeLoading = true;

    const res: any = await quitGroup(groupId.value);
    const { code } = res;
    uni.hideLoading();
    agreeLoading = false;
    dialogVisible.value = false;
    closePopup1();
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "退出群失败，请稍后再试",
            duration: 1500,
        });
        return;
    }

    const conversationID = `GROUP${groupId.value}`;
    IM_STORE.delGroup(groupId.value);
    uni.$TUIKit.TUIConversationServer.deleteConversation(conversationID).then(
        (imResponse: any) => {


                /*#ifdef APP-PLUS*/
                uni.switchTab({
                    url: "/pages/quanzi/quanzi",
                    success(){
                        uni.showToast({
                            icon: "none",
                            title: "退出群成功",
                            duration: 1500,
                        });
                    }
                });
                /*#endif*/
        }
    );
};

const refeshGroupMembers = () => {
    offset = 0;
    getGroupMembers(groupId.value);
};
const baseService: any = ref(["10000", "10001", "10002", "10003"]);
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const dialogVisible2 = ref(false);
const currentService = ref({});
/*
const showService = (service: any) => {
    service.detail = service.detail.replace(/\n/g, " <br/>");
    currentService.value = service;
    dialogVisible1.value = true;
};

const editGroup = () => {
    uni.navigateTo({
        url: `/pages/quanzi/createCircle?groupId=${groupId.value}`,
    });
};
*/
let dismissGroupLoading = false;

const dismissGroup = async () => {
    uni.showLoading();
    if (dismissGroupLoading) {
        return;
    }

    dismissGroupLoading = true;

    const res: any = await destroyGroup({ groupId: groupId.value });
    const { flag } = res;
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "解散群失败，请稍后再试",
            duration: 1500,
        });
        dismissGroupLoading = false;
        return;
    }

    closePopup();

    dialogVisible2.value = false;

    const conversationID = `GROUP${groupId.value}`;


    IM_STORE.delGroup(groupId.value);


    uni.$TUIKit.TUIConversationServer.deleteConversation(conversationID)
        .then(()=>{
            
                uni.switchTab({
                    url: "/pages/quanzi/quanzi",
                    success(){
                        uni.showToast({
                            icon: "none",
                            title: "解散群成功",
                            duration: 1500,
                        });
                    }
                });
                
        })
        .catch(() => {
            uni.showToast({
                icon: "none",
                title: "解散群失败",
                duration: 1500,
            });
    });

};
/*
const getClass = computed(() => {
    if (groupDetail.value.label == 1) {
        return "icon-jianzhongshoushen";
    }
    if (groupDetail.value.label == 2) {
        return "icon-jianzhizengji";
    }
    if (groupDetail.value.label == 3) {
        return "icon-yundongjiankang";
    }
    if (groupDetail.value.label == 4) {
        return "icon-jiankangyinshi";
    }
    if (groupDetail.value.label == 5) {
        return "icon-xiuxianyangsheng";
    }
});
*/
const clearConversion = async () => {
    const conversationId = `GROUP${groupId.value}`;

    popupDel.value.close();

    const res: any = await clearHistoryMessage(conversationId);
    const { code } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "删除聊天记录失败,请稍后再试",
            duration: 1500,
        });
        return;
    }

    uni.showToast({
        icon: "none",
        title: "聊天记录已清除",
        duration: 1500,
    });

    IM_STORE.setIsCompleted(true);

    IM_STORE.setMessageList([]);

    uni.$emit('clearListContentHeight');

    //clearHistoryMessage
};
/*
const goHistory = () => {
    uni.navigateTo({
        url: `/pages/TUIKit/TUIPages/TUIGroup/groupPages/groupHistory?groupID=${groupId.value}`,
    });
};
*/
const popup = ref();
const cant_popup = ref();

const openPopup = () => {


/*
    if(groupDetail.value.groupUsers.length>1){
        cant_popup.value.open('bottom');
        return;
    }
*/
    popup.value.open("bottom");
};

const closePopup = () => {
    popup.value.close();
};

const popup1 = ref();

const openPopup1 = () => {
    popup1.value.open("bottom");
};

const closePopup1 = () => {
    popup1.value.close();
};
/*
const selectService = (service) => {
    const arr = service.detail.split("&*&*&");
    currentShowService.value = service;
    currentShowService.value.detailArr = arr;
    servicePopup.value.open();
};
*/
const currentShowService: any = ref({});
const servicePopup = ref();

const scale = ref(1);

onReady(() => {});

let isFirst = true;

const dataLoad = () => {
	offset = 0;
	Promise.all([
	    getDetail(groupId.value),
	    GetGroupProfile(groupId.value),
	    getGroupMembers(groupId.value),
	])
	.then(() => {
		getMemberViewHeight();
		getContent3Height();
	})
	.finally(() => {
		getMemberViewHeight();
		getContent3Height();
		isFirst = false;
	});
}
onShow(() => {
    if (groupId.value&&!isFirst) {
        dataLoad()
		setTimeout(() => {
		    dataLoad()
		}, 500);
		setTimeout(() => {  
		    dataLoad()
		}, 1000);
    }
});

onLoad(async (option: any) => {

    if (option.groupId) {
        isPinned.value = IM_STORE.conversation.isPinned;
		isMute.value = IM_STORE.conversation?.messageRemindType === "AcceptNotNotify";
        groupId.value = option.groupId;
        offset = 0;
        Promise.all([
            getDetail(option.groupId),
            GetGroupProfile(option.groupId),
            getGroupMembers(option.groupId),
        ])
            .then(() => {
                getMemberViewHeight();
                getContent3Height();
            })
            .finally(() => {
                getMemberViewHeight();
                getContent3Height();
                isFirst = false;
            });

        // getDetail(option.groupId);
        // GetGroupProfile(option.groupId);
        // getGroupMembers(option.groupId);
    }
    uni.getSystemInfo({
        success(result) {
            systemInfo.setSystemInfo(result);
        },
    });

    uni.$on("nickChange", nickChange);
    uni.$on("groupUserRoleUpdate", refeshGroupMembers);
    uni.$on("groupNickChange", groupNickChange);
	//获取群二维码
	GetGroupQR()
});
onUnload(() => {
    uni.$off("groupUserRoleUpdate", refeshGroupMembers);
    uni.$off("nickChange", nickChange);
    uni.$off("groupNickChange", groupNickChange);
    //checkNet();
});
const codePopup: any = ref(false);
const groupQR = ref('');
const onShowerweima = () => {
    codePopup.value = true;
}
const GetGroupQR = async()=>{
    const res:any = await getGroupQR({groupId:groupId.value})
    const { flag, data,message} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: message||'获取群二维码失败',
            duration: 2000,
        });
        return
    }
    groupQR.value = message;
}
const openCodePopup = (props: any) => {
    console.log(props);
    codePopup.value = props;
}
</script>

<style lang="scss" scoped>
.groupMsg {
    width: 710rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    background: #fff;
    height: 130rpx;
    border-radius: 20rpx;
    gap: 20rpx;
    .title2 {
        padding-right: 0 !important;
    }
    .service1 {
        width: 500rpx;
        height: 100rpx;
        white-space: nowrap;

        .box {
            gap: 20rpx;
        }
        .card {
            position: relative;
            width: 100rpx;
            &.checked {
                .rect {
                    background: url("/static/createCircle/bg2.png") no-repeat;
                    background-size: 100% 100%;

                    &.newService {
                        background: url("/static/createCircle/bg3.png")
                            no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }

            .rect {
                width: 100rpx;
                height: 100rpx;
                border-radius: 10rpx;
                background: rgba(35, 226, 166, 0.1);
                &.newService {
                    background: rgba(226, 123, 35, 0.1);
                }
                &.add {
                    background: rgba(226, 123, 35, 0.1);
                }

                .img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

.servicePopup {
    position: relative;
    width: 750rpx;
    overflow: hidden;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    overflow: hidden;
    background: #fff;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    &.newService {
        .shadow {
            background: linear-gradient(
                27deg,
                #fce2d6 0%,
                #fff5e9 59%,
                #fddec0 100%
            );
        }

        .content {
            .title {
                .left_btn {
                    color: #f19945;
                }
                .close {
                }
            }
            .row1 {
                .index {
                    background: #f19945;
                }
            }

            .sbtn1 {
                background: linear-gradient(318deg, #ffaf67 0%, #e48e41 100%);
            }

            .sbtn2 {
                color: #f19945;
                border: 2rpx solid #ffaf67;
            }
        }
    }

    .shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        height: 555rpx;
        background: linear-gradient(
            27deg,
            #d6f6fc 0%,
            #eafce1 59%,
            #b2facd 100%
        );
    }
    .shadow1 {
        position: absolute;
        top: 155rpx;
        left: 0;
        width: 750rpx;
        height: 500rpx;
        background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
        );
    }
    .content {
        position: relative;
        z-index: 10;
        width: 750rpx;
        padding-top: 40rpx;
        .title {
            position: relative;
            width: 750rpx;
            height: 50rpx;
            padding: 0 40rpx;
            margin-bottom: 70rpx;
            .left_btn {
                font-size: 30rpx;
                font-weight: 400;
                color: #1dc691;
                left: 40rpx;
            }
            .close {
                right: 40rpx;
            }
            .text {
                font-size: 34rpx;
                font-weight: 600;
                color: #333333;
            }

            .img {
                width: 36rpx;
                height: 36rpx;
            }
        }

        .row1 {
            width: 750rpx;
            padding: 0 50rpx;
            margin-bottom: 44rpx;
            .index {
                width: 48rpx;
                height: 48rpx;
                border-radius: 24rpx;
                background: #1dc691;
                color: #fff;
                font-weight: 600;
                font-size: 28rpx;
                font-family: 'din',DINAlternate-Bold, DINAlternate;
            }
            .text {
                width: 570rpx;
                margin-left: 20rpx;
                font-size: 28rpx;
                color: #333;
                line-height: 40rpx;
            }
        }

        .sbtn {
            width: 690rpx;
            height: 80rpx;
            margin: 0 auto;
            border-radius: 20rpx;
            font-size: 32rpx;
            font-weight: 600;
        }

        .sbtn1 {
            background: linear-gradient(318deg, #64f1c5 0%, #29dba3 100%);
            color: #fff;
            margin-bottom: 20rpx;
        }
        .sbtn2 {
            border: 2rpx solid #1dc691;
            color: #1dc691;
            margin-bottom: 20rpx;
        }
    }
}

.jiaobiao {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 160rpx;
    height: 40rpx;
    border-top-left-radius: 0;
    border-top-right-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
    overflow: hidden;
    z-index: 5;

    &.shadow0 {
        background: #1dc691;
    }
    &.shadow1 {
        background: #ff9f26;
    }
    &.shadow2 {
        background: #905ade;
    }
    &.shadow3 {
        background: #4c7dfe;
    }
    &.shadow4 {
        background: #ad3569;
    }
    .icon {
        color: #fff;
        font-size: 20rpx;
        margin-right: 5rpx;
    }

    .text {
        z-index: 10;
        font-size: 20rpx;
        color: #fff;
    }
}

.slim_header {
    .share {
        width: 48rpx;
        height: 48rpx;
    }
}

.dteali {
    background: #f5f5f5;
    .title2 {
        padding: 0 30rpx;
        height: 48rpx;
        font-size: 34rpx;
        font-weight: 600;
        color: #333333;
        .dot {
            width: 6rpx;
            height: 30rpx;
            background: #1dc691;
            border-radius: 3rpx;
            margin-right: 10rpx;
        }
    }

    .top_bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 750rpx;
        height: 750rpx;
        overflow: hidden;
        .shadow {
            position: absolute;
            z-index: 10;
            width: 750rpx;
            height: 550rpx;
            top: 0;
            left: 0;
            background: linear-gradient(180deg, #000000 0%, #3f544e 100%);
            opacity: 0.6;
        }
        .shadow1 {
            position: absolute;
            z-index: 11;
            width: 750rpx;
            height: 200rpx;
            top: 550rpx;
            left: 0;
            background: #f5f5f5;
            background: linear-gradient(
                180deg,
                rgba(63, 84, 78, 0.6),
                rgba(245, 245, 245, 1)
            );
        }
        .img {
            width: 750rpx;
            height: 740rpx;
        }
    }

    .dotTab1 {
        position: relative;
        width: 380rpx;
        height: 100rpx;

        .active_tab_bg {
            position: absolute;
            top: 45rpx;
            left: 0;
            width: 190rpx;
            height: 52rpx;
            // background: linear-gradient(270deg, rgba(73,243,210,0) 0%, #23E2A6 100%);
            transition: left linear 0.15s;
            .linear {
                width: 150rpx;
                height: 26rpx;
                background: linear-gradient(
                    to right,
                    #23e2a6 0,
                    rgba(35, 226, 166, 0.8) 30%,
                    rgba(73, 243, 210, 0)
                );
                border-radius: 13rpx;
            }
            transform: translateX(10rpx);
            &.active {
                left: 190rpx;
            }
        }
        .tab {
            position: absolute;
            z-index: 5;
            top: 0;
            width: 190rpx;
            height: 100rpx;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .text {
                color: #fff;
                font-size: 34rpx;
                font-weight: bold;
                transition: all linear 0.15s;
                &.active {
                    font-size: 40rpx;
                }
            }
        }
    }

    .service {
        width: 100%;
        padding-bottom: 20rpx;
        gap: 20rpx;
        padding: 0 24rpx;

        .card {
            position: relative;
            width: 150rpx;
            &.checked {
                .rect {
                    background: url("/static/createCircle/bg2.png") no-repeat;
                    background-size: 100% 100%;

                    &.newService {
                        background: url("/static/createCircle/bg3.png")
                            no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }

            .rect {
                width: 150rpx;
                height: 150rpx;
                border-radius: 10rpx;
                background: rgba(35, 226, 166, 0.1);
                &.newService {
                    background: rgba(226, 123, 35, 0.1);
                }
                &.add {
                    background: rgba(226, 123, 35, 0.1);
                }

                .img {
                    width: 100%;
                    height: 100%;
                }
            }

            .text {
                width: 100%;
                height: 35rpx;
                margin-top: 5rpx;
                font-size: 24rpx;
                color: #666;
                text-align: center;
                height: 70rpx;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;
                // lines:2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                -webkit-line-clamp: 2;
                &.newServiceText {
                    height: 70rpx;
                }
            }
        }
    }

    .rich_box {
        padding: 20rpx 30rpx;
        min-height: 200rpx;
        font-size: 28rpx;
    }

    .scroll_box {
        width: 750rpx;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        .title1 {
            width: 750rpx;
            height: 70rpx;
            padding: 0 48rpx;
            font-size: 50rpx;
            color: #fff;
            font-weight: 600;
            .icon {
                font-size: 30rpx;
                color: #ff6f57;
            }
        }
        .msg1 {
            width: 750rpx;
            padding: 0 30rpx 0 50rpx;
            margin-top: 20rpx;
            .pos {
                width: 40rpx;
                height: 40rpx;
            }

            .text {
                color: #fff;
                font-size: 24rpx;
            }
            .goHistory {
                font-size: 24rpx;
                color: #23e2a6;
                .img {
                    width: 20rpx;
                    height: 20rpx;
                }
            }
        }
    }

    .swiper_box {
        position: absolute;
        z-index: 50;
        width: 750rpx;
        left: 0;
        right: 0;
        transition: all linear 0.15s;

        &.active.box1 {
            transform: translateX(-100%);
        }

        &.active.box2 {
            transform: translateX(0);
        }

        &.box1 {
            transform: translateX(0);
        }
        &.box2 {
            transform: translateX(100%);
            .quanzineirong {
                position: relative;
                padding-top: 20rpx;
                width: 710rpx;
                margin: 0 auto;
                .content3 {
                    width: 100%;
                    position: relative;
                    border-radius: 20rpx;
                    padding-top: 20rpx;
                    background: #fff;
                }

                .scollew {
                    margin-top: 40rpx;
                    display: flex;

                    .neirong-list {
                        display: flex;
                        flex-direction: column;

                        .nerong-img {
                            width: 150rpx;
                            height: 150rpx;
                            background: rgba(35, 226, 166, 0.1);
                            border-radius: 10rpx;
                        }

                        .neirong-text {
                            width: 150rpx;
                            display: inline-block;
                            margin-top: 8rpx;
                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #666666;
                            word-break: break-all;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            /* 这里是超出几行省略 */
                            overflow: hidden;
                        }
                    }
                }
            }

            .quanzhushuo {
                width: 710rpx;
                min-height: 320rpx;
                margin: 0rpx auto;
                margin-top: 20rpx;
                background: #ffffff;
                border-radius: 20rpx;
                padding-top: 20rpx;

                .quanzhushuo-list {
                    padding: 0 30rpx 32rpx 30rpx;
                    box-sizing: border-box;
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
            }

            .yaoqiu {
                width: 710rpx;
                margin: 20rpx auto;
                min-height: 320rpx;
                background: #ffffff;
                border-radius: 20rpx;

                .quanzhushuo-list {
                    padding: 0 30rpx 32rpx 20rpx;
                    box-sizing: border-box;
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
            }
        }
    }

    .quanzhu {
        position: relative;
        z-index: 4;
        width: 710rpx;
        background: #ffffff;
        border-radius: 20rpx;
        margin: 0 auto;
        padding: 20rpx 30rpx;

        .message {
            margin-top: 10rpx;

            .hengxian {
                width: 1rpx;
                height: 40rpx;
                border: 2rpx solid #eeeeee;
                margin: 0 15rpx;
            }

            .right_mess {
                padding-left: 10rpx;

                .pingjia {
                    text {
                        color: #1dc691;
                    }

                    image {
                        width: 12rpx;
                        height: 12rpx;
                        margin-left: 8rpx;
                    }
                }

                .pinglun {
                    font-size: 24rpx;
                    width: 280rpx;
                    font-weight: 400;
                    color: #999999;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    /* 这里是超出几行省略 */
                    overflow: hidden;
                }
            }

            .touxoang {
                width: 160rpx;
                height: 160rpx;
                border-radius: 10rpx;
            }

            .dailing {
                margin-left: 20rpx;

                .xingming {
                    font-size: 34rpx;
                    font-weight: 500;
                    color: #333333;
                }

                .renshu {
                    font-size: 30rpx;
                    font-weight: 500;
                    color: #1dc691;
                    padding-left: 30rpx;

                    image {
                        width: 12rpx;
                        height: 12rpx;
                        margin-left: 8rpx;
                    }
                }

                .ren {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #666666;
                }
            }
        }

        .jinru {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 50rpx;
            height: 50rpx;
            background: rgba(35, 226, 166, 0.6);
            border-radius: 20rpx 0px 20rpx 0px;

            image {
                width: 20rpx;
                height: 20rpx;
            }
        }

        .time {
            font-size: 24rpx;
            font-weight: 400;
            color: #666666;
            display: flex;
            align-items: center;
            &:active {
                background: #f5f5f5;
            }

            .chakan {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
            }

            .right-b {
                width: 20rpx;
                height: 20rpx;
            }
        }

        .quanzhu_title {
            display: flex;
        }

        .user-li {
            display: grid;
            grid-template-columns: repeat(5, 110rpx);
            grid-gap: 20rpx 30rpx;
            justify-content: center;
            margin-top: 22rpx;

            .user-li-demoadd {
                width: 110rpx;
                height: 110rpx;
                background: #f5f5f5 !important;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
            }

            .user-li-demo {
                position: relative;

                .role {
                    position: absolute;
                    width: fit-content;
                    padding: 0 15rpx;
                    height: 30rpx;
                    background: #23e2a6;
                    border-radius: 12rpx;
                    font-size: 18rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 400;
                    color: #ffffff;
                    text-align: center;
                    line-height: 30rpx;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                }

                .vip {
                    width: 36rpx;
                    height: 36rpx;
                    position: absolute;
                    right: 0;
                }

                .touxiang {
                    width: 110rpx;
                    height: 110rpx;
                    box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.2);
                    border: 3rpx solid #ffffff;
                    border-radius: 50%;
                }

                .jia {
                    width: 25rpx;
                    height: 25rpx;
                }
            }
        }
    }

    .quanzishezhi {
        width: 710rpx;
        position: relative;
        margin: 0 auto;
        .content3 {
            width: 100%;
            border-radius: 20rpx;
            margin-top: 20rpx;
            padding-top: 20rpx;
            background: #fff;
        }

        .opt-list {
            width: 710rpx;
            height: 80rpx;
            padding: 0 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &:active {
                background: #f5f5f5;
            }
            &.notactive:active {
                background: #fff;
            }

            .text {
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                display: flex;
                align-items: center;

                .wenhao {
                    width: 32rpx;
                    height: 32rpx;
                }
            }

            .switch {
                .right-b {
                    width: 20rpx;
                    height: 20rpx;
                }
            }
        }
    }

    .btn_main {
        position: absolute;
        bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
        bottom: calc(env(safe-area-inset-bottom) + 20rpx);
        left: 10rpx;
        width: 690rpx;
        height: 80rpx;
        border-radius: 20rpx;
        border: 2rpx solid #1dc691;
        display: flex;
        align-items: center;
        justify-content: center;

        &:active {
            opacity: 0.7;
        }
        .quit {
            font-size: 32rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #1dc691;
        }
    }
}
</style>   